﻿@{
    ViewBag.Title = "Map";
}
<h2>Map Excel Column to Question</h2>
<script type="text/javascript">
    $(function () {
        $("#addColumn").button();
        $(".button").button();
        $("#colMapDialog").dialog({
            autoOpen: false,
            resizable: false,
            height: 380,
            width: 950,
            modal: true,
            buttons: {
                'Save': function () {
                    var col = $("#mapColNumber").val();
                    var qg = $("#questionGroup").val();
                    var q = $("#questionId").val();
                    var m = $("#sheets").val();
                    var MapModel =
                                {
                                    Map: ko.observableArray([]),
                                    add: function () { }
                                };
                    MapModel.Map.push({ MapId: 0, MapCatagoryId: m, Column: col, QuestionId: q, QuestionGroupId: qg });
                    var d = ko.toJSON(MapModel.Map);
                    var a = $.parseJSON(d);
                    // alert(JSON.stringify(a));
                    $.ajax({
                        url: '/Data/CreateMap', type: "POST",
                        data: JSON.stringify(a),
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) { }
                    });
                    $("#mapColNumber").val("");
                    $(this).dialog('close');
                    updateMapping();
                },
                Cancel: function () {
                    $("#mapColNumber").val("");
                    updateMapping();
                    $(this).dialog('close');

                }
            }
        });
        $("#addColumn").click(function () {
            $("#colMapDialog").dialog("open");
            $("#questionGroup").selectmenu({});
        });

        $("#questionGroup").change(function () {
            //Questions for the the selected group
            var groupId = $(this).val();
            var groupDescrip = $(this).text();
            var viewModelQG =
            {
                QG: ko.observableArray([])
            }
            viewModelQG.QG.push({ QuestionGroupId: groupId })

            var u = ko.toJSON(viewModelQG.QG);
            var a = $.parseJSON(u);

            $('#questionId').find('option').remove();
            $.ajax({
                url: '/Data/GetQuestions', type: "POST",
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                data: JSON.stringify(a),
                success: function (data) {
                    $.each(data, function () {
                        $.each(this, function (k, v) {
                            $("#questionId").append("<option value=" + v.QuestionId + ">" + v.QuestionDescription + "</option>");
                        });
                    });
                    $("#questionId").selectmenu({});
                },
                error: function (data) { alert("Error"); }
            });
        });

        $("#questionId").change(function () { });

        $("#sheets").change(function () { updateMapping(); });

        updateMapping();

        $("#sheets").selectmenu({});
        $("#questionId").selectmenu({});
    });

    function updateMapping() {
        var col = $("#mapColNumber").val();
        var qg = $("#questionGroup").val();
        var q = $("#questionId").val();
        var m = $("#sheets").val();
        var MapModel =
                                {
                                    Map: ko.observableArray([]),
                                    add: function () { }
                                };
        MapModel.Map.push({ MapId: 0, MapCatagoryId: m, Column: col, QuestionId: q, QuestionGroupId: qg });
        var d = ko.toJSON(MapModel.Map);
        var a = $.parseJSON(d);
        $('#sheetRecords').find('tr').remove();
        $.ajax({
            url: '/Data/GetMap', type: "POST",
            data: JSON.stringify(a),
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $.each(data, function () {
                    $.each(this, function (k, v) {
                        $("#sheetRecords").append("<tr><td>" + v.Column + "</td><td>" + v.QuestionDescription + "</td><td>" + v.QuestionGroupDescription + "</td><td><div class='button' onclick='Edit(" + v.Column + ")' >Edit</div></td><td><div class='button' onclick=' Delete(" + v.MapId + ")' >Delete</div></td></tr>");
                    });
                });
                $(".button").button();
            },
            error: function () { $('#sheetRecords').find('tr').remove(); }
        });
    }

    function Edit(id) {
        $("#mapColNumber").val(id);
        //Get the record from the database
//        var col = $("#mapColNumber").val();
//        var qg = $("#questionGroup").val();
//        var q = $("#questionId").val();
//        var m = $("#sheets").val();
//        var MapModel =
//                                {
//                                    Map: ko.observableArray([]),
//                                    add: function () { }
//                                };
//        MapModel.Map.push({MapId: id, MapCatagoryId: m, Column: col, QuestionId: q, QuestionGroupId: qg });
//        var d = ko.toJSON(MapModel.Map);
//        var a = $.parseJSON(d);
//        $.ajax({
//            url: '/Data/GetMap', type: "POST",
//            data: JSON.stringify(a),
//            contentType: 'application/json; charset=utf-8',
//            success: function (data) {
//                $.each(data, function () {
//                    $.each(this, function (k, v) {
//                        $("#sheetRecords").append("<tr><td>" + v.Column + "</td><td>" + v.QuestionDescription + "</td><td>" + v.QuestionGroupDescription + "</td><td><div class='button' onclick='Edit(" + v.MapId + ")' >Edit</div></td><td><div class='button' onclick=' Delete(" + v.MapId + ")' >Delete</div></td></tr>");
//                    });
//                });
//                $(".button").button();
//            },
//            error: function () { $('#sheetRecords').find('tr').remove(); }
//        });
        //set the record to the form

        $("#colMapDialog").dialog("open");
    }

     function Delete(id) {
         var MapModel =
                                {
                                    Map: ko.observableArray([]),
                                    add: function () { }
                                };
         MapModel.Map.push({ MapId: id});
         var d = ko.toJSON(MapModel.Map);
         var a = $.parseJSON(d);
         $('#sheetRecords').find('tr').remove();
         $.ajax({
             url: '/Data/DeleteMap', type: "POST",
             data: JSON.stringify(a),
             contentType: 'application/json; charset=utf-8',
             success: function (data) {
                 updateMapping();
             },
             error: function () { $('#sheetRecords').find('tr').remove(); }
         }); 
    }
</script>


<div title="Create a mapping column" id="colMapDialog">
<form>
    <table style="width:100%; ">
        <tr>
            <td style="width:120px;">Number of column:</td>
            <td><input id="mapColNumber" name="mapColNumber" /></td>
        </tr>
        <tr>
            <td>Question Group:</td>
            <td>
            <select id="questionGroup" name="questionGroup">
               @foreach (var i in new Host.Models.Data().QuestionGroup)
               { 
               <option value="@i.QuestionGroupId">@i.Description</option>
               }
               </select>
            </td>
        </tr>
        <tr>
            <td>Question:</td>
            <td>
                <select name="questionId" id="questionId" style="width:600px;">
                
                </select>
            </td>
        </tr>
    </table>
    </form>
    <br />
    <table style="width:100%;">
    <tr style="vertical-align:top;">
        <td><div class="remember"></div></td>
        <td style="padding-left:10px; font-size:11px;">
        To add a column map simply type the column number in the text area provided.
        <br />
    I.E. Please ensure that the column number is a valid number on the sheet of the excel that will be imported.
    Clicking cancel will reset the form and close the dialog.</td>
    </tr>
    </table>
</div>
 
<div id="question" style="padding-top:20px;">
<table>
    <tr>
        <td style="width:180px;">Excel Sheet to be mapped:</td>
        <td><select id="sheets" name="sheets">
            <option value="1">Claims</option>
            <option value="2">Members</option>
            <option value="3">Employers</option>
            <option value="4">Transactions</option>
        </select></td>
        <td style="padding-left:10px;">
        <div id="addColumn" >Add Mapping Column</div>
        </td>
    </tr>
</table>

<br />
<p>Sheet mapping for the selected sheet:</p>
<div>
<table style="width:80%; border:1px solid #000;">
    <thead>
        <tr>
            <th>Excel sheet column</th>
            <th>Question</th>
            <th>Question Group</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody id="sheetRecords">
    </tbody>
</table>
</div>

</div>
<script type="text/html" id="QuestionGroupRowTemplate">
                 <span data-bind="text: QuestionGroupId" ></span></span>
   </script>
<script type="text/javascript">
    //QuestionGroup
    var QGviewModel = {
        QuestionGroup: ko.observableArray([]), add: function () { }, removeUser: function (gift) { }, save: function () { }
    };

    ko.dependentObservable(function () {
        $.ajax({ url: '/Data/GetQuestionGroups', type: "GET", dataType: 'json', data: {}, contentType: 'application/json; charset=utf-8',
            success: function (data) {
            var u = ko.toJSON(data);
            var a = $.parseJSON(u);
          //  alert(ko.utils.stringifyJson(a));
            QGviewModel.QuestionGroup(data);
            
            }
        });
    },
             QGviewModel);

    ko.applyBindings(QGviewModel);
</script>